<template lang="pug">
    transition(name="slide")
        .left-aside
            ul
                li(v-for='(item,index) in aside' :key="index" @click="to(item,index)")
                    router-link(:to="item.path" :class="{'check-li':item.check}")
                        span
                            img(:src="item.icon").work-icon
                            span.worrk-text {{item.name}}
                        span.naw-where
                    transition-group(name="slide" tag="div")
                        .other(v-for="(cell,flag) in item.other" :key="flag" v-show="item.showOther" @click="stopBubble")
                            router-link(:to="cell.path" )
                                div {{cell.name}}
</template>

<script>
export default {
  name: "LeftAside",
  data() {
    return {
      aside: [
        {
          name: "首页",
          path: "/home",
          check: true,
          icon: require("../../public/icon/leftAside/home-icon.png")
        },
        {
          name: "填写",
          path: "/write",
          check: false,
          icon: require("../../public/icon/leftAside/submitMenu-icon.png")
        },
        {
          name: "列表",
          path: "/list",
          check: false,
          icon: require("../../public/icon/leftAside/list-icon.png")
        },
        {
          name: "管理",
          path: "",
          check: false,
          icon: require("../../public/icon/leftAside/management-icon.png"),
          showOther: false,
          other: [
            {
              name: "工作项目",
              path: "/management"
            },
            {
              name: "工作项目",
              path: "/home"
            }
          ]
        },
        {
          name: "列表",
          path: "/list",
          check: false,
          icon: require("../../public/icon/leftAside/list-icon.png")
        }
      ]
    };
  },
  mounted() {
    this.reloadAside(this.getAsideIndex());
  },
  methods: {
    to(item, index) {
      this.reloadAside(index);
      this.setAsideIndex(index);
      this.isShowOther(item, index);
    },
    // 重新加载侧边栏(都为不选中状态)
    reloadAside(num) {
      this.aside.forEach((item, index) => {
        if (Number(num) === index) {
          return (item.check = true);
        } else {
          return (item.check = false);
        }
      });
    },
    //每次单机选中的 项存入 session 中
    setAsideIndex(index) {
      sessionStorage.setItem("asideIndex", index);
    },
    // 获取侧边栏是第几个
    getAsideIndex() {
      if (sessionStorage.getItem("asideIndex") === null) {
        sessionStorage.setItem("asideIndex", "0");
      }
      return sessionStorage.getItem("asideIndex");
    },
    // 显示更多内容的下拉菜单
    isShowOther(item) {
      item.showOther = !item.showOther;
    },
    // 单击更多菜单栏时停止 冒泡
    stopBubble() {
      event.stopPropagation();
    }
  },
  computed: {},
  watch: {}
};
</script>

<style scoped lang="stylus">
    .slide-enter-active, .slide-leave-active
        transition: 1s

    .slide-enter, .slide-leave-to
        transform: translateX(-100%);

    .left-aside
        width 200px
        box-shadow 0 1px 5px gray
        background-color #1F2837
        text-align left
        position fixed
        left: 0
        top: 50px
        bottom 0
        z-index 1
        ul
            list-style-type none
            .check-li
                background-color #84AF9B
            li
                cursor pointer
                color white
                a
                    padding 10px 0 10px 10px
                    display: flex
                    justify-content space-between
                    align-items center
                    color white
                    text-decoration none
                    &:hover
                        background-color #84AF9B
                    .work-icon
                        width 20px
                        height 20px
                        margin-right:10px
                        vertical-align text-bottom
                    .naw-where
                        display: inline-block
                        width 0
                        height 0
                        border 18px solid transparent
                        border-right-color #1F2837
                .other
                    position relative
                    a
                        display block
                        margin 5px 0
                        div
                            text-align center
                            &:hover
                                background-color #84AF9B
</style>
